<template>
  <div style="margin-top: 10px">
    <div style="width: 100%;text-align: center">
      <span style="margin-right: 100px;font-size: 20px">回款情况</span>
      <el-date-picker
          v-model="selectYears"
          type="yearrange"
          range-separator="To"
          start-placeholder="Start Year"
          end-placeholder="End Year"
      /><el-button @click="handleQuery" :icon="Search" circle />
    </div>

    <v-chart v-on:click="handleClick" ref="chart" class="chart" style="height: 350px" :option="optionBar" autoresize />
    <el-dialog v-model="openDia" width="80%">
      <el-tabs v-model="activeFinish" @tab-click="handleFinishClick">
        <el-tab-pane label="进行中" name="first"></el-tab-pane>
        <el-tab-pane label="已结束" name="second"></el-tab-pane>
      </el-tabs>
      <el-table v-loading="loading" :data="cwList">
        <el-table-column label="项目编号" align="center" width="200" prop="code" />
        <el-table-column label="项目名称" align="center" width="250" prop="projectName"/>
        <el-table-column label="项目负责人" align="center" prop="projectLeader" width="150"/>
        <el-table-column label="项目截止日期" align="center" prop="finishDate" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.finishDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目回款情况" align="center" width="500">
          <template #default="scope">
            <div>
              <el-row>
                <el-col :span="2"></el-col>
                <el-col :span="6">
                  <el-button @click="showPayment(scope.row.pay,scope.row.projectId,scope.row.finishPrice)"  type="info" plain style="top: 15%;position: absolute;right: 70%">详情</el-button>
                </el-col>
                <el-col :span="6">
                  <div style="position: absolute;top:8%;bottom: 10%;background-color: #eae7e7;padding: 5px 15px;display: flex;justify-content: center;align-items: center;">
                    <span v-if="scope.row.finishPrice==0" style="font-size: 16px;">{{scope.row.hasPayCount==0?'未到账':'已支付'+scope.row.hasPayCount+'期'}}</span>
                    <span v-else style="font-size: 16px;">已全部到账</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div>
                    <div style="background-color: #1ab394;height: 80%;margin-bottom: 3px;color: white;font-weight: 600">已到账{{scope.row.hasPay/100}}元</div>
                    <div style="background-color: deepskyblue;height: 80%;color: white;font-weight: 600">未到账{{scope.row.unPay/100}}元</div>
                  </div>
                </el-col>
                <el-col :span="2">
                </el-col>
              </el-row>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="财务结算情况" width="120">
          <template #default="scope">
            <el-tag v-if="scope.row.type === true" class="ml-2" type="success">已结束</el-tag>
            <el-tag v-if="scope.row.type === false" class="ml-2" type="danger">进行中</el-tag>
          </template>
        </el-table-column>
      </el-table>

      <pagination
          v-show="total>0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
      />
    </el-dialog>

    <el-dialog title="财务信息" v-model="openDia2" @open="() => fFinish=true" @closed="() => fFinish=false" width="1000px" append-to-body style="border-radius: 20px">
      <el-switch
          disabled
          v-model="isFinishPrice"
          class="mb-2"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          active-text="已全部到账"
          :active-value="1"
          inactive-text="未全部到账"
          :inactive-value="0"
      />
      <el-table :data="paymentList">
        <el-table-column fixed label="期数" align="center" prop="num" width="100"/>
        <el-table-column label="日期" align="center" prop="paymentDate" width="150">
          <template #default="scope">
            <span>{{ parseTime(scope.row.paymentDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="金额" align="center" prop="paymentPrice" width="100">
          <template #default="scope">
            {{scope.row.paymentPrice/100}}
          </template>
        </el-table-column>
        <el-table-column label="到账日期" align="center" prop="getDate" width="150">
          <template #default="scope">
            <span>{{ parseTime(scope.row.getDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="实际到账金额" align="center" prop="paymentPrice" width="120">
          <template #default="scope">
            {{scope.row.accountPrice/100}}
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="paymentPrice" width="200">
          <template #default="scope">
            {{scope.row.remark}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" label="提醒" width="200">
          <template #default="scope">
            <div v-if="scope.row.getDate==null">
              <span v-if="scope.row.paymentDate.getTime()+86400000>=new Date().getTime()" >
                距约定日期还有{{parseInt((scope.row.paymentDate.getTime()-new Date().getTime())/86400000)}}天
              </span>
              <span v-else style="color: red">
                已逾期{{parseInt((new Date().getTime()-scope.row.paymentDate.getTime())/86400000)}}天
              </span>
            </div>
            <div v-else>
              <span v-if="scope.row.getDate.getTime()<=scope.row.paymentDate.getTime()" style="color: #2b8500">
                已准时到账
              </span>
              <span v-else style="color: #ab0505">
                逾期{{parseInt((scope.row.getDate.getTime()-scope.row.paymentDate.getTime())/86400000)}}天后到账
              </span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>
<script setup>
import { Search } from '@element-plus/icons-vue'
import VChart from 'vue-echarts';
import useHomeStore from "@/store/modules/home.js";
import {getCwList, getHK, getJT} from "@/api/home/home.js";
import {parseTime} from "@/utils/ruoyi.js";
import {listItem} from "@/api/finance/finance.js";

const chart=ref(null);
const optionBar = ref(null);
const currYear = new Date().getFullYear();
let tdate=new Date().setFullYear(currYear-2);
const selectYears=ref([new Date(tdate), new Date()]);
let years = [currYear - 2,currYear - 1,currYear];
let hk0 = [];
let hk1 = [];

const handleYears=(years)=>{
  let res=[]
  for(let y of years){
    res.push(y+'年');
  }
  return res;
}
const handleClick=(param)=>{
  let y=param.value.substring(0,param.value.length-1);
  queryParams.value.year=y;
  getList();
  openDia.value=true;
}
const handleQuery=()=>{
  let startYear = selectYears.value[0].getFullYear();
  let endYear = selectYears.value[1].getFullYear();
  getHK(startYear,endYear).then(res=>{
    years=[]
    let tmap = res.data;
    hk0=[]
    hk1=[]
    for (let i = startYear; i <= endYear; i++) {
      console.log('bz:'+i)
      years.push(i);
      hk0.push(tmap[i]==null?0:tmap[i]['HK0']==null ? 0 : tmap[i]['HK0']/100);
      hk1.push(tmap[i]==null?0:tmap[i]['HK1']==null ? 0 : tmap[i]['HK1']/100);
    }
    console.log(hk0,hk1);
    chart.value.setOption(option());
  })
}

const labelOption = {
  show: true,
  position: 'top',
  distance: '15',
  align: 'center',
  verticalAlign: 'top',
  rotate: '0',
  formatter: '{name|{a}}: {c}',
  fontSize: 16,
  rich: {
    name: {}
  }
};

const option =()=>{
  return{
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['未回款', '已回款']
  },
    color:[
      '#4cdd2d','#e12f2f'
    ],
  toolbox: {
    show: true,
    orient: 'vertical',
    left: 'right',
    top: 'center',
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar', 'stack'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  xAxis: [
    {
      type: 'category',
      axisTick: { show: false },
      data: handleYears(years),
      triggerEvent: true,
      axisLabel:{
        textStyle:{
          fontSize: '20px'
        }
      }
    },
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '未回款',
      type: 'bar',
      barGap: 0,
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: hk0
    },
    {
      name: '已回款',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: hk1
    }
  ]
}
};

//
const openDia=ref(false);
const cwList=ref([]);
const isFinishPrice=ref(0);
const paymentList=ref([]);
const pid=ref();
let fFinish=false;
const openDia2 =ref(false);
const loading =ref(false);
const total = ref(0);
const queryParams=ref({pageNum: 1, pageSize: 10})
const dateList=ref([]);

function showPayment(pay,id,finishPrice){
  isFinishPrice.value=finishPrice;
  for (let e of pay) {
    e.paymentDate=new Date(e.paymentDate);
    if (e.getDate!=null){
      e.getDate=new Date(e.getDate);
    }
  }
  paymentList.value=pay;
  pid.value=id;
  openDia2.value=true;
  fFinish=true;
}
let finish=false;
function getList(){
  loading.value=true;
  getCwList(queryParams.value).then(response => {
    dateList.value = response.rows
    cwList.value = response.rows.filter(row => row.type === finish);
    total.value = response.total;
    loading.value = false;
  });
}
function handleFinishClick(tab){
  if (tab.props.name=='second'){
    finish=true;
  }else{
    finish=false;
  }
  getList();
}

handleQuery();
</script>

<style scoped lang="scss">

</style>
